<!doctype html>
<!--[if IE 7 ]>		 <html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>		 <html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>		 <html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>.data() | jQuery API Documentation</title>

  <meta name="author" content="JS Foundation - js.foundation">
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">

  <link rel="shortcut icon" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/i/favicon.ico">

  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=3">
  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/style.css">

  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/plugins.js"></script>
  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/main.js"></script>

  <script src="https://use.typekit.net/wde1aof.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>
  <!-- at the end of the HEAD -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/docsearch.css">

  <link rel='https://api.w.org/' href='//api.jquery.com/wp-json/' />
  <meta name="generator" content="WordPress 4.5.2" />
  <link rel="alternate" type="application/json+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fdata%2F" />
  <link rel="alternate" type="text/xml+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fdata%2F&#038;format=xml" />

</head>
<body class="api jquery single single-post postid-111 single-format-standard single-author singular">

<header>
  <section id="global-nav">
    <nav>
      <div class="constrain">
        <ul class="projects">
          <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
          <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
          <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
          <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
          <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
        </ul>
        <ul class="links">
          <li><a href="https://plugins.jquery.com/">Plugins</a></li>
          <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
            <ul>
              <li><a href="https://js.foundation/CLA">CLA</a></li>
              <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
              <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
              <li><a href="https://contribute.jquery.org/code/">Code</a></li>
              <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
              <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
            </ul>
          </li>
          <li class="dropdown"><a href="https://js.foundation/events">Events</a>
            <ul class="wide">
            </ul>
          </li>
          <li class="dropdown"><a href="https://jquery.org/support/">Support</a>
            <ul>
              <li><a href="https://learn.jquery.com/">Learning Center</a></li>
              <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
              <li><a href="https://forum.jquery.com/">Forums</a></li>
              <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
              <li><a href="https://jquery.org/support/">Commercial Support</a></li>
            </ul>
          </li>
          <li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
            <ul>
              <li><a href="https://js.foundation/about/join">Join</a></li>
              <li><a href="https://js.foundation/about/members">Members</a></li>
              <li><a href="https://js.foundation/about/leadership">Leadership</a></li>
              <li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
              <li><a href="https://js.foundation/about/donate">Donate</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </section>
</header>

<div id="container">
  <div id="logo-events" class="constrain clearfix">
    <h2 class="logo"><a href="https://jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a></h2>

    <aside>
      <div id="broadcast">
        <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img src="/jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation" alt="Support the JS Foundation" border="0" width="400" height="100"></a>
      </div>
    </aside>
  </div>

  <nav id="main" class="constrain clearfix">
    <div class="menu-top-container">
      <ul id="menu-top" class="menu">
        <li class="menu-item"><a href="https://jquery.com/download/">Download</a></li>
        <li class="menu-item current"><a href="https://api.jquery.com/">API Documentation</a></li>
        <li class="menu-item"><a href="https://blog.jquery.com/">Blog</a></li>
        <li class="menu-item"><a href="https://plugins.jquery.com/">Plugins</a></li>
        <li class="menu-item"><a href="https://jquery.com/browser-support/">Browser Support</a></li>
      </ul>
    </div>

    <form method="get" class="searchform" action="//api.jquery.com/">
      <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
      <label>
        <span class="visuallyhidden">Search jQuery API Documentation</span>
        <input type="text" name="s" value=""
               placeholder="Search">
      </label>
    </form>
  </nav>

  <div id="content-wrapper" class="clearfix row">

    <div class="content-right twelve columns">
      <div id="content">

        <article id="post-111" class="post-111 post type-post status-publish format-standard hentry category-data category-data-storage category-72 category-75 category-78">
          <header class="entry-header">
            <h1 class="entry-title">.data()</h1>
            <hr>
            <div class="entry-meta">
              Categories: <span class="category"><a href="//api.jquery.com/category/data/">Data</a></span><span class="category-divider"> | </span><span class="category"><a href="//api.jquery.com/category/miscellaneous/">Miscellaneous</a> &gt; <a href="//api.jquery.com/category/miscellaneous/data-storage/">Data Storage</a></span>		</div><!-- .entry-meta -->
          </header><!-- .entry-header -->

          <div class="entry-content">
            Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.<div class="toc">
            <h4><span>Contents:</span></h4>
            <ul class="toc-list">
              <li>
                <a href="#data1">.data( key, value )</a><ul>
                <li><a href="#data-key-value">.data( key, value )</a></li>
                <li><a href="#data-obj">.data( obj )</a></li>
              </ul>
              </li>
              <li>
                <a href="#data2">.data( key )</a><ul>
                <li><a href="#data-key">.data( key )</a></li>
                <li><a href="#data">.data()</a></li>
              </ul>
              </li>
            </ul>
          </div><article id="data1" class="entry method"><h2 class="section-title">
            <span class="name">.data( key, value )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
          </h2>
            <div class="entry-wrapper">
              <p class="desc"><strong>Description: </strong>Store arbitrary data associated with the matched elements.</p>
              <ul class="signatures">
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.2.3/">1.2.3</a></span><a id="data-key-value" href="#data-key-value"><span class="icon-link"></span>.data( key, value )</a>
                  </h4>
                  <ul>
                    <li id="data-key-value-key">
                      <div><strong>key</strong></div>
                      <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                      </div>
                      <div>A string naming the piece of data to set.</div>
                    </li>
                    <li id="data-key-value-value">
                      <div><strong>value</strong></div>
                      <div>Type: <a href="http://api.jquery.com/Types/#Anything">Anything</a>
                      </div>
                      <div>The new data value; this can be any Javascript type except <code>undefined</code>.</div>
                    </li>
                  </ul>
                </li>
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.4.3/">1.4.3</a></span><a id="data-obj" href="#data-obj"><span class="icon-link"></span>.data( obj )</a>
                  </h4>
                  <ul><li id="data-obj-obj">
                    <div><strong>obj</strong></div>
                    <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
                    </div>
                    <div>An object of key-value pairs of data to update.</div>
                  </li></ul>
                </li>
              </ul>
              <div class="longdesc" id="entry-longdesc">
                <p>The <code>.data()</code> method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.</p>
                <p>We can set several distinct values for a single element and retrieve them later:</p>
                <div class="syntaxhighlighter javascript">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                        <div class="line n4">4</div>

                        <div class="line n5">5</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;body&quot;</span> ).data( <span class="hljs-string">&quot;foo&quot;</span>, <span class="hljs-number">52</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;body&quot;</span> ).data( <span class="hljs-string">&quot;bar&quot;</span>, { <span class="hljs-attr">isManual</span>: <span class="hljs-literal">true</span> } );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;body&quot;</span> ).data( { <span class="hljs-attr">baz</span>: [ <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span> ] } );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;body&quot;</span> ).data( <span class="hljs-string">&quot;foo&quot;</span> ); <span class="hljs-comment">// 52</span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;body&quot;</span> ).data(); <span class="hljs-comment">// { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }</span></code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <p>Using the <code>data()</code> method to update data does not affect attributes in the DOM. To set a <code>data-*</code> attribute value, use <code><a href="/attr/">attr</a></code>.</p>
                <p>Prior to jQuery 1.4.3, <code>.data( obj )</code> completely replaced all data. Since jQuery 1.4.3, data is instead extended by shallow merge.</p>
                <p>Since <strong>jQuery 3</strong>, every two-character sequence of &quot;-&quot; (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the <a href="https://html.spec.whatwg.org/multipage/dom.html#dom-dataset">HTML dataset API</a>. A statement like <code>$( &quot;body&quot; ).data( { &quot;my-name&quot;: &quot;aValue&quot; } ).data();</code> will return <code>{ myName: &quot;aValue&quot; }</code>.</p>
                <p>Due to the way browsers interact with plugins and external code, the <code>.data()</code> method cannot be used on <code>&lt;object&gt;</code> (unless it&apos;s a Flash plugin), <code>&lt;applet&gt;</code> or <code>&lt;embed&gt;</code> elements.</p>
              </div>
              <h3>Additional Notes:</h3>
              <div class="longdesc"><ul>
                <li>
                  Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
                </li>
                <li>
                  <code>undefined</code> is not recognized as a data value. Calls such as <code>.data( &quot;name&quot;, undefined )</code> will return the jQuery object that it was called on, allowing for chaining.
                </li>
              </ul></div>
              <section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
                <p>Store then retrieve a value from the div element.</p>
                <div class="syntaxhighlighter xml">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                        <div class="line n4">4</div>

                        <div class="line n5">5</div>

                        <div class="line n6">6</div>

                        <div class="line n7">7</div>

                        <div class="line n8">8</div>

                        <div class="line n9">9</div>

                        <div class="line n10">10</div>

                        <div class="line n11">11</div>

                        <div class="line n12">12</div>

                        <div class="line n13">13</div>

                        <div class="line n14">14</div>

                        <div class="line n15">15</div>

                        <div class="line n16">16</div>

                        <div class="line n17">17</div>

                        <div class="line n18">18</div>

                        <div class="line n19">19</div>

                        <div class="line n20">20</div>

                        <div class="line n21">21</div>

                        <div class="line n22">22</div>

                        <div class="line n23">23</div>

                        <div class="line n24">24</div>

                        <div class="line n25">25</div>

                        <div class="line n26">26</div>

                        <div class="line n27">27</div>

                        <div class="line n28">28</div>

                        <div class="line n29">29</div>

                        <div class="line n30">30</div>

                        <div class="line n31">31</div>

                        <div class="line n32">32</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>data demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">div</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: blue;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">span</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: red;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  The values stored were</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  and</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;test&quot;</span>, { <span class="hljs-attr">first</span>: <span class="hljs-number">16</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">&quot;pizza!&quot;</span> } );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;span&quot;</span> ).first().text( $( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;test&quot;</span> ).first );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;span&quot;</span> ).last().text( $( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;test&quot;</span> ).last );</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <h4>Demo:</h4>
                <div class="demo code-demo"></div>
              </div></section>
            </div></article><article id="data2" class="entry method"><h2 class="section-title">
            <span class="name">.data( key )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
          </h2>
            <div class="entry-wrapper">
              <p class="desc"><strong>Description: </strong>Return arbitrary data associated with the first element in the jQuery collection, as set by data() or by an HTML5 <code>data-*</code> attribute.</p>
              <ul class="signatures">
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.2.3/">1.2.3</a></span><a id="data-key" href="#data-key"><span class="icon-link"></span>.data( key )</a>
                  </h4>
                  <ul><li id="data-key-key">
                    <div><strong>key</strong></div>
                    <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                    </div>
                    <div>Name of the data stored.</div>
                  </li></ul>
                </li>
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.4/">1.4</a></span><a id="data" href="#data"><span class="icon-link"></span>.data()</a>
                  </h4>
                  <ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
                </li>
              </ul>
              <div class="longdesc" id="entry-longdesc-1">
                <p>The <code>.data()</code> method allows us to read data previously associated with DOM elements. We can retrieve several distinct values for a single element one at a time, or as a set:</p>
                <div class="syntaxhighlighter javascript">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                        <div class="line n4">4</div>

                        <div class="line n5">5</div>

                        <div class="line n6">6</div>

                        <div class="line n7">7</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code><span class="hljs-keyword">var</span> elem = <span class="hljs-built_in">document</span>.createElement( <span class="hljs-string">&quot;span&quot;</span> );</code></div></div><div class="container"><div class="line"><code>$( elem ).data( <span class="hljs-string">&quot;foo&quot;</span> ); <span class="hljs-comment">// undefined</span></code></div></div><div class="container"><div class="line"><code>$( elem ).data(); <span class="hljs-comment">// {}</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( elem ).data( <span class="hljs-string">&quot;foo&quot;</span>, <span class="hljs-number">42</span> );</code></div></div><div class="container"><div class="line"><code>$( elem ).data( <span class="hljs-string">&quot;foo&quot;</span> ); <span class="hljs-comment">// 42</span></code></div></div><div class="container"><div class="line"><code>$( elem ).data(); <span class="hljs-comment">// { foo: 42 }</span></code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <p>Calling <code>.data()</code> with no parameters returns a JavaScript object containing each stored value as a property. The object can be used directly to get data values (but note that property names originally containing dashes will have been modified as described below).</p>
                <p>Since <strong>jQuery 3</strong>, every two-character sequence of &quot;-&quot; (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the <a href="https://html.spec.whatwg.org/multipage/dom.html#dom-dataset">HTML dataset API</a>. A statement like <code>$( &quot;body&quot; ).data( { &quot;my-name&quot;: &quot;aValue&quot; } ).data();</code> will return <code>{ myName: &quot;aValue&quot; }</code>.</p>
                <h4 id="data-html5">
                  <a href="#data-html5">HTML5 <code>data-*</code> Attributes</a>
                </h4>
                <p>Since jQuery 1.4.3, <a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes"><code>data-*</code> attributes</a> are used to initialize jQuery data. An element&apos;s <code>data-*</code> attributes are retrieved the first time the <code>data()</code> method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery).</p>
                <p>Every attempt is made to convert the attribute&apos;s string value to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A string is only converted to a number if doing so doesn&apos;t change its representation (for example, the string &quot;100&quot; is converted to the number 100, but &quot;1E02&quot; and &quot;100.000&quot; are left as strings because their numeric value of 100 serializes to &quot;100&quot;). When a string starts with &apos;{&apos; or &apos;[&apos;, then <code>jQuery.parseJSON</code> is used to parse it; it must follow <a href="https://en.wikipedia.org/wiki/JSON#Data_types.2C_syntax_and_example">valid JSON syntax</a> <em>including quoted property names</em>. A string not parseable as a JavaScript value is not converted.</p>
                <p>To retrieve a <code>data-*</code> attribute value as an unconverted string, use the <code><a href="/attr/">attr()</a></code> method.</p>
                <p>Since jQuery 1.6, dashes in <code>data-*</code> attribute names have been processed in alignment with the <a href="https://html.spec.whatwg.org/multipage/dom.html#dom-dataset">HTML dataset API</a>.</p>
                <p>For example, given the following HTML:</p>
                <div class="syntaxhighlighter xml">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">data-role</span>=<span class="hljs-string">&quot;page&quot;</span> <span class="hljs-attr">data-last-value</span>=<span class="hljs-string">&quot;43&quot;</span> <span class="hljs-attr">data-hidden</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">&apos;{&quot;name&quot;:&quot;John&quot;}&apos;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <p>The following comparisons are all true:</p>
                <div class="syntaxhighlighter javascript">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                        <div class="line n4">4</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;role&quot;</span> ) === <span class="hljs-string">&quot;page&quot;</span>;</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;lastValue&quot;</span> ) === <span class="hljs-number">43</span>;</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;hidden&quot;</span> ) === <span class="hljs-literal">true</span>;</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;options&quot;</span> ).name === <span class="hljs-string">&quot;John&quot;</span>;</code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

              </div>
              <h3>Additional Notes:</h3>
              <div class="longdesc"><ul><li>
                Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
              </li></ul></div>
              <section class="entry-examples" id="entry-examples-1"><header><h2>Example:</h2></header><div class="entry-example" id="example-1-0">
                <p>Get the data named &quot;blah&quot; stored at for an element.</p>
                <div class="syntaxhighlighter xml">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                        <div class="line n4">4</div>

                        <div class="line n5">5</div>

                        <div class="line n6">6</div>

                        <div class="line n7">7</div>

                        <div class="line n8">8</div>

                        <div class="line n9">9</div>

                        <div class="line n10">10</div>

                        <div class="line n11">11</div>

                        <div class="line n12">12</div>

                        <div class="line n13">13</div>

                        <div class="line n14">14</div>

                        <div class="line n15">15</div>

                        <div class="line n16">16</div>

                        <div class="line n17">17</div>

                        <div class="line n18">18</div>

                        <div class="line n19">19</div>

                        <div class="line n20">20</div>

                        <div class="line n21">21</div>

                        <div class="line n22">22</div>

                        <div class="line n23">23</div>

                        <div class="line n24">24</div>

                        <div class="line n25">25</div>

                        <div class="line n26">26</div>

                        <div class="line n27">27</div>

                        <div class="line n28">28</div>

                        <div class="line n29">29</div>

                        <div class="line n30">30</div>

                        <div class="line n31">31</div>

                        <div class="line n32">32</div>

                        <div class="line n33">33</div>

                        <div class="line n34">34</div>

                        <div class="line n35">35</div>

                        <div class="line n36">36</div>

                        <div class="line n37">37</div>

                        <div class="line n38">38</div>

                        <div class="line n39">39</div>

                        <div class="line n40">40</div>

                        <div class="line n41">41</div>

                        <div class="line n42">42</div>

                        <div class="line n43">43</div>

                        <div class="line n44">44</div>

                        <div class="line n45">45</div>

                        <div class="line n46">46</div>

                        <div class="line n47">47</div>

                        <div class="line n48">48</div>

                        <div class="line n49">49</div>

                        <div class="line n50">50</div>

                        <div class="line n51">51</div>

                        <div class="line n52">52</div>

                        <div class="line n53">53</div>

                        <div class="line n54">54</div>

                        <div class="line n55">55</div>

                        <div class="line n56">56</div>

                        <div class="line n57">57</div>

                        <div class="line n58">58</div>

                        <div class="line n59">59</div>

                        <div class="line n60">60</div>

                        <div class="line n61">61</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>data demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">div</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: yellow;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">button</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: blue;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">span</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: red;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>A div<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Get &quot;blah&quot; from the div<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Set &quot;blah&quot; to &quot;hello&quot;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Set &quot;blah&quot; to 86<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Remove &quot;blah&quot; from the div<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The &quot;blah&quot; value of this div is <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>?<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;button&quot;</span> ).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">var</span> value;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">switch</span> ( $( <span class="hljs-string">&quot;button&quot;</span> ).index( <span class="hljs-built_in">this</span> ) ) {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-keyword">case</span> <span class="hljs-number">0</span> :</code></div></div><div class="container"><div class="line"><code>      value = $( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;blah&quot;</span> );</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-keyword">case</span> <span class="hljs-number">1</span> :</code></div></div><div class="container"><div class="line"><code>      $( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;blah&quot;</span>, <span class="hljs-string">&quot;hello&quot;</span> );</code></div></div><div class="container"><div class="line"><code>      value = <span class="hljs-string">&quot;Stored!&quot;</span>;</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-keyword">case</span> <span class="hljs-number">2</span> :</code></div></div><div class="container"><div class="line"><code>      $( <span class="hljs-string">&quot;div&quot;</span> ).data( <span class="hljs-string">&quot;blah&quot;</span>, <span class="hljs-number">86</span> );</code></div></div><div class="container"><div class="line"><code>      value = <span class="hljs-string">&quot;Stored!&quot;</span>;</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-keyword">case</span> <span class="hljs-number">3</span> :</code></div></div><div class="container"><div class="line"><code>      $( <span class="hljs-string">&quot;div&quot;</span> ).removeData( <span class="hljs-string">&quot;blah&quot;</span> );</code></div></div><div class="container"><div class="line"><code>      value = <span class="hljs-string">&quot;Removed!&quot;</span>;</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;span&quot;</span> ).text( <span class="hljs-string">&quot;&quot;</span> + value );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <h4>Demo:</h4>
                <div class="demo code-demo"></div>
              </div></section>
            </div></article>	</div><!-- .entry-content -->

        </article><!-- #post-111 -->
      </div>

      <div id="sidebar" class="widget-area" role="complementary">
        <aside id="categories" class="widget">
          <ul>
            <li class="cat-item cat-item-1"><a href="//api.jquery.com/category/ajax/" >Ajax</a>
              <ul class='children'>
                <li class="cat-item cat-item-2"><a href="//api.jquery.com/category/ajax/global-ajax-event-handlers/" >Global Ajax Event Handlers</a>
                </li>
                <li class="cat-item cat-item-3"><a href="//api.jquery.com/category/ajax/helper-functions/" >Helper Functions</a>
                </li>
                <li class="cat-item cat-item-4"><a href="//api.jquery.com/category/ajax/low-level-interface/" >Low-Level Interface</a>
                </li>
                <li class="cat-item cat-item-5"><a href="//api.jquery.com/category/ajax/shorthand-methods/" >Shorthand Methods</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-6"><a href="//api.jquery.com/category/attributes/" >Attributes</a>
            </li>
            <li class="cat-item cat-item-7"><a href="//api.jquery.com/category/callbacks-object/" >Callbacks Object</a>
            </li>
            <li class="cat-item cat-item-8"><a href="//api.jquery.com/category/core/" >Core</a>
            </li>
            <li class="cat-item cat-item-9"><a href="//api.jquery.com/category/css/" >CSS</a>
            </li>
            <li class="cat-item cat-item-10 current-cat"><a href="//api.jquery.com/category/data/" >Data</a>
            </li>
            <li class="cat-item cat-item-11"><a href="//api.jquery.com/category/deferred-object/" >Deferred Object</a>
            </li>
            <li class="cat-item cat-item-87"><a href="//api.jquery.com/category/deprecated/" >Deprecated</a>
              <ul class='children'>
                <li class="cat-item cat-item-90"><a href="//api.jquery.com/category/deprecated/deprecated-1.3/" >Deprecated 1.3</a>
                </li>
                <li class="cat-item cat-item-88"><a href="//api.jquery.com/category/deprecated/deprecated-1.7/" >Deprecated 1.7</a>
                </li>
                <li class="cat-item cat-item-89"><a href="//api.jquery.com/category/deprecated/deprecated-1.8/" >Deprecated 1.8</a>
                </li>
                <li class="cat-item cat-item-94"><a href="//api.jquery.com/category/deprecated/deprecated-1.9/" >Deprecated 1.9</a>
                </li>
                <li class="cat-item cat-item-93"><a href="//api.jquery.com/category/deprecated/deprecated-1.10/" >Deprecated 1.10</a>
                </li>
                <li class="cat-item cat-item-98"><a href="//api.jquery.com/category/deprecated/deprecated-3.0/" >Deprecated 3.0</a>
                </li>
                <li class="cat-item cat-item-101"><a href="//api.jquery.com/category/deprecated/deprecated-3.2/" >Deprecated 3.2</a>
                </li>
                <li class="cat-item cat-item-99"><a href="//api.jquery.com/category/deprecated/deprecated-3.3/" >Deprecated 3.3</a>
                </li>
                <li class="cat-item cat-item-100"><a href="//api.jquery.com/category/deprecated/deprecated-3.4/" >Deprecated 3.4</a>
                </li>
                <li class="cat-item cat-item-102"><a href="//api.jquery.com/category/deprecated/deprecated-3.5/" >Deprecated 3.5</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-12"><a href="//api.jquery.com/category/dimensions/" >Dimensions</a>
            </li>
            <li class="cat-item cat-item-13"><a href="//api.jquery.com/category/effects/" >Effects</a>
              <ul class='children'>
                <li class="cat-item cat-item-14"><a href="//api.jquery.com/category/effects/basics/" >Basics</a>
                </li>
                <li class="cat-item cat-item-15"><a href="//api.jquery.com/category/effects/custom-effects/" >Custom</a>
                </li>
                <li class="cat-item cat-item-16"><a href="//api.jquery.com/category/effects/fading/" >Fading</a>
                </li>
                <li class="cat-item cat-item-17"><a href="//api.jquery.com/category/effects/sliding/" >Sliding</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-18"><a href="//api.jquery.com/category/events/" >Events</a>
              <ul class='children'>
                <li class="cat-item cat-item-19"><a href="//api.jquery.com/category/events/browser-events/" >Browser Events</a>
                </li>
                <li class="cat-item cat-item-20"><a href="//api.jquery.com/category/events/document-loading/" >Document Loading</a>
                </li>
                <li class="cat-item cat-item-21"><a href="//api.jquery.com/category/events/event-handler-attachment/" >Event Handler Attachment</a>
                </li>
                <li class="cat-item cat-item-22"><a href="//api.jquery.com/category/events/event-object/" >Event Object</a>
                </li>
                <li class="cat-item cat-item-23"><a href="//api.jquery.com/category/events/form-events/" >Form Events</a>
                </li>
                <li class="cat-item cat-item-24"><a href="//api.jquery.com/category/events/keyboard-events/" >Keyboard Events</a>
                </li>
                <li class="cat-item cat-item-25"><a href="//api.jquery.com/category/events/mouse-events/" >Mouse Events</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-26"><a href="//api.jquery.com/category/forms/" >Forms</a>
            </li>
            <li class="cat-item cat-item-27"><a href="//api.jquery.com/category/internals/" >Internals</a>
            </li>
            <li class="cat-item cat-item-28"><a href="//api.jquery.com/category/manipulation/" >Manipulation</a>
              <ul class='children'>
                <li class="cat-item cat-item-29"><a href="//api.jquery.com/category/manipulation/class-attribute/" >Class Attribute</a>
                </li>
                <li class="cat-item cat-item-30"><a href="//api.jquery.com/category/manipulation/copying/" >Copying</a>
                </li>
                <li class="cat-item cat-item-32"><a href="//api.jquery.com/category/manipulation/dom-insertion-around/" >DOM Insertion, Around</a>
                </li>
                <li class="cat-item cat-item-33"><a href="//api.jquery.com/category/manipulation/dom-insertion-inside/" >DOM Insertion, Inside</a>
                </li>
                <li class="cat-item cat-item-34"><a href="//api.jquery.com/category/manipulation/dom-insertion-outside/" >DOM Insertion, Outside</a>
                </li>
                <li class="cat-item cat-item-35"><a href="//api.jquery.com/category/manipulation/dom-removal/" >DOM Removal</a>
                </li>
                <li class="cat-item cat-item-36"><a href="//api.jquery.com/category/manipulation/dom-replacement/" >DOM Replacement</a>
                </li>
                <li class="cat-item cat-item-37"><a href="//api.jquery.com/category/manipulation/general-attributes/" >General Attributes</a>
                </li>
                <li class="cat-item cat-item-38"><a href="//api.jquery.com/category/manipulation/style-properties/" >Style Properties</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-39"><a href="//api.jquery.com/category/miscellaneous/" >Miscellaneous</a>
              <ul class='children'>
                <li class="cat-item cat-item-40"><a href="//api.jquery.com/category/miscellaneous/collection-manipulation/" >Collection Manipulation</a>
                </li>
                <li class="cat-item cat-item-41"><a href="//api.jquery.com/category/miscellaneous/data-storage/" >Data Storage</a>
                </li>
                <li class="cat-item cat-item-42"><a href="//api.jquery.com/category/miscellaneous/dom-element-methods/" >DOM Element Methods</a>
                </li>
                <li class="cat-item cat-item-43"><a href="//api.jquery.com/category/miscellaneous/setup-methods/" >Setup Methods</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-44"><a href="//api.jquery.com/category/offset/" >Offset</a>
            </li>
            <li class="cat-item cat-item-45"><a href="//api.jquery.com/category/properties/" >Properties</a>
              <ul class='children'>
                <li class="cat-item cat-item-46"><a href="//api.jquery.com/category/properties/jquery-object-instance-properties/" >Properties of jQuery Object Instances</a>
                </li>
                <li class="cat-item cat-item-47"><a href="//api.jquery.com/category/properties/global-jquery-object-properties/" >Properties of the Global jQuery Object</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-92"><a href="//api.jquery.com/category/removed/" >Removed</a>
            </li>
            <li class="cat-item cat-item-48"><a href="//api.jquery.com/category/selectors/" >Selectors</a>
              <ul class='children'>
                <li class="cat-item cat-item-49"><a href="//api.jquery.com/category/selectors/attribute-selectors/" >Attribute</a>
                </li>
                <li class="cat-item cat-item-50"><a href="//api.jquery.com/category/selectors/basic-css-selectors/" >Basic</a>
                </li>
                <li class="cat-item cat-item-51"><a href="//api.jquery.com/category/selectors/basic-filter-selectors/" >Basic Filter</a>
                </li>
                <li class="cat-item cat-item-52"><a href="//api.jquery.com/category/selectors/child-filter-selectors/" >Child Filter</a>
                </li>
                <li class="cat-item cat-item-53"><a href="//api.jquery.com/category/selectors/content-filter-selector/" >Content Filter</a>
                </li>
                <li class="cat-item cat-item-54"><a href="//api.jquery.com/category/selectors/form-selectors/" >Form</a>
                </li>
                <li class="cat-item cat-item-55"><a href="//api.jquery.com/category/selectors/hierarchy-selectors/" >Hierarchy</a>
                </li>
                <li class="cat-item cat-item-56"><a href="//api.jquery.com/category/selectors/jquery-selector-extensions/" >jQuery Extensions</a>
                </li>
                <li class="cat-item cat-item-57"><a href="//api.jquery.com/category/selectors/visibility-filter-selectors/" >Visibility Filter</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-58"><a href="//api.jquery.com/category/traversing/" >Traversing</a>
              <ul class='children'>
                <li class="cat-item cat-item-59"><a href="//api.jquery.com/category/traversing/filtering/" >Filtering</a>
                </li>
                <li class="cat-item cat-item-60"><a href="//api.jquery.com/category/traversing/miscellaneous-traversal/" >Miscellaneous Traversing</a>
                </li>
                <li class="cat-item cat-item-61"><a href="//api.jquery.com/category/traversing/tree-traversal/" >Tree Traversal</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-63"><a href="//api.jquery.com/category/utilities/" >Utilities</a>
            </li>
            <li class="cat-item cat-item-64"><a href="//api.jquery.com/category/version/" >Version</a>
              <ul class='children'>
                <li class="cat-item cat-item-65"><a href="//api.jquery.com/category/version/1.0/" >Version 1.0</a>
                </li>
                <li class="cat-item cat-item-66"><a href="//api.jquery.com/category/version/1.0.4/" >Version 1.0.4</a>
                </li>
                <li class="cat-item cat-item-67"><a href="//api.jquery.com/category/version/1.1/" >Version 1.1</a>
                </li>
                <li class="cat-item cat-item-68"><a href="//api.jquery.com/category/version/1.1.2/" >Version 1.1.2</a>
                </li>
                <li class="cat-item cat-item-69"><a href="//api.jquery.com/category/version/1.1.3/" >Version 1.1.3</a>
                </li>
                <li class="cat-item cat-item-70"><a href="//api.jquery.com/category/version/1.1.4/" >Version 1.1.4</a>
                </li>
                <li class="cat-item cat-item-71"><a href="//api.jquery.com/category/version/1.2/" >Version 1.2</a>
                </li>
                <li class="cat-item cat-item-72"><a href="//api.jquery.com/category/version/1.2.3/" >Version 1.2.3</a>
                </li>
                <li class="cat-item cat-item-73"><a href="//api.jquery.com/category/version/1.2.6/" >Version 1.2.6</a>
                </li>
                <li class="cat-item cat-item-74"><a href="//api.jquery.com/category/version/1.3/" >Version 1.3</a>
                </li>
                <li class="cat-item cat-item-75"><a href="//api.jquery.com/category/version/1.4/" >Version 1.4</a>
                </li>
                <li class="cat-item cat-item-76"><a href="//api.jquery.com/category/version/1.4.1/" >Version 1.4.1</a>
                </li>
                <li class="cat-item cat-item-77"><a href="//api.jquery.com/category/version/1.4.2/" >Version 1.4.2</a>
                </li>
                <li class="cat-item cat-item-78"><a href="//api.jquery.com/category/version/1.4.3/" >Version 1.4.3</a>
                </li>
                <li class="cat-item cat-item-79"><a href="//api.jquery.com/category/version/1.4.4/" >Version 1.4.4</a>
                </li>
                <li class="cat-item cat-item-80"><a href="//api.jquery.com/category/version/1.5/" >Version 1.5</a>
                </li>
                <li class="cat-item cat-item-81"><a href="//api.jquery.com/category/version/1.5.1/" >Version 1.5.1</a>
                </li>
                <li class="cat-item cat-item-82"><a href="//api.jquery.com/category/version/1.6/" >Version 1.6</a>
                </li>
                <li class="cat-item cat-item-83"><a href="//api.jquery.com/category/version/1.7/" >Version 1.7</a>
                </li>
                <li class="cat-item cat-item-84"><a href="//api.jquery.com/category/version/1.8/" >Version 1.8</a>
                </li>
                <li class="cat-item cat-item-86"><a href="//api.jquery.com/category/version/1.9/" >Version 1.9</a>
                </li>
                <li class="cat-item cat-item-103"><a href="//api.jquery.com/category/version/1.12-and-2.2/" >Version 1.12 &amp; 2.2</a>
                </li>
                <li class="cat-item cat-item-95"><a href="//api.jquery.com/category/version/3.0/" >Version 3.0</a>
                </li>
                <li class="cat-item cat-item-96"><a href="//api.jquery.com/category/version/3.1/" >Version 3.1</a>
                </li>
                <li class="cat-item cat-item-104"><a href="//api.jquery.com/category/version/3.2/" >Version 3.2</a>
                </li>
                <li class="cat-item cat-item-105"><a href="//api.jquery.com/category/version/3.3/" >Version 3.3</a>
                </li>
                <li class="cat-item cat-item-106"><a href="//api.jquery.com/category/version/3.4/" >Version 3.4</a>
                </li>
                <li class="cat-item cat-item-107"><a href="//api.jquery.com/category/version/3.5/" >Version 3.5</a>
                </li>
              </ul>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </div>
</div>

<footer class="clearfix simple">
  <div class="constrain">
    <div class="row">
      <div class="six columns offset-by-three">
        <h3><span>Books</span></h3>
        <ul class="books">
          <li>
            <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92" height="114">
              Learning jQuery Fourth Edition
              <cite>Karl Swedberg and Jonathan Chaffer</cite>
            </a>
          </li>
          <li>
            <a href="https://www.manning.com/books/jquery-in-action-third-edition">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92" height="114">
              jQuery in Action
              <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
            </a>
          </li>
          <li>
            <a href="https://www.syncfusion.com/ebooks/jquery">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" alt="jQuery Succinctly by Cody Lindley" width="92" height="114">
              jQuery Succinctly
              <cite>Cody Lindley</cite>
            </a>
          </li>
        </ul>
      </div>
    </div>


    <div id="legal">
      <ul class="footer-site-links">
        <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
        <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
        <li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
        <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
        <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
        <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
      </ul>
      <p class="copyright">
        Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
        <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
      </p>
    </div>

  </div>
</footer>

<script type='text/javascript' src='//api.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"  onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
